<template>
    <!-- 试卷描述 -->
    <el-descriptions :column="3" :border="true" v-if="paper && Object.keys(paper).length">
        <el-descriptions-item>
            <template #label>
                <div class="label-icon">
                    <lemon-icon icon="Timer" size="18" value="开始时间" style="bottom: -4px" />
                </div>
            </template>
            {{ paper.startTime }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="label-icon">
                    <lemon-icon icon="Timer" size="18" value="结束时间" style="bottom: -4px" />
                </div>
            </template>
            {{ paper.endTime }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="label-icon">
                    <lemon-icon icon="Stopwatch" size="18" value="时长" style="bottom: -4px" />
                </div>
            </template>
            {{ paper.duration }} 分钟
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="label-icon">
                    <lemon-icon icon="Document" size="18" value="总分" style="bottom: -4px" />
                </div>
            </template>
            {{ paper.totalScore }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="label-icon">
                    <lemon-icon icon="DocumentChecked" size="18" value="及格分数" style="bottom: -4px" />
                </div>
            </template>
            {{ paper.passScore }}
        </el-descriptions-item>
        <el-descriptions-item v-if="paperScore !== null">
            <template #label>
                <div class="label-icon">
                    <lemon-icon icon="Tickets" size="18" value="得分" style="bottom: -4px" />
                </div>
            </template>
            {{ paperScore }}
        </el-descriptions-item>
        <el-descriptions-item v-if="paper?.remark">
            <template #label>
                <div class="label-icon">
                    <lemon-icon icon="Warning" size="18" value="考试说明" style="bottom: -4px" />
                </div>
            </template>
            <p class="remark-container">
                <el-tooltip effect="dark" :content="paper.remark" placement="top">
                    <span class="remark-text" :style="{ maxWidth: maxWidth }"> {{ paper.remark }} </span>
                </el-tooltip>
            </p>
        </el-descriptions-item>
    </el-descriptions>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from "vue";

//父传子
interface Props {
    paper?: Record<string, any>;
    paperScore?: number | null;
}
const props = withDefaults(defineProps<Props>(), {
    paper: () => ({}),
    paperScore: null,
});

//可以根据需要调整最大宽度
const maxWidth = ref<string>("");

//初始化宽度
const updateWindowSize = () => {
    const width = document.documentElement.clientWidth - 200;
    if (props.paperScore !== null) {
        maxWidth.value = `${width - 200}px`;
    } else {
        maxWidth.value = `${width / 6}px`;
    }
};

watch(
    () => props.paperScore,
    () => updateWindowSize()
);

//在组件挂载时初始化宽度
onMounted(() => {
    window.addEventListener("resize", updateWindowSize);
    updateWindowSize();
});
onUnmounted(() => window.removeEventListener("resize", updateWindowSize));
</script>

<style scoped lang="less">
.remark-container {
    margin: 0;
}

.remark-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
